<template>
	<view>
		<leo-virtual-list @getListApi="getListApi">
			<template #content={data}>
				<view class="drop flex flex-y flex-1" :style="[{'transform':data.index === data.activeIndex?'scale(1)':'scale(1)',}]">
					<view v-if="data.name % 2 === 0" class="flex flex-1 flex-center-center" style="background-color: aqua;">
						<view class="ellipsis flex-1" style="text-align: center;">
							--
						</view>
					</view>
					<view v-if="data.name % 8 === 0" class="flex flex-1 flex-center-center" style="background-color: aqua;">
						<view class="ellipsis flex-1" style="text-align: center;">
							--
						</view>
					</view>
					<view class="flex flex-1 flex-center-center" style="background-color: aqua;">
						<view class="ellipsis flex-1" style="text-align: center;">
							n:{{data.name}} 
						</view>
						<uni-icons class="flex-none" @touchstart="changeDisabled(data.index)" style="margin-left: auto;" type="bars" size="30"></uni-icons>
					</view>
				</view>
			</template>
		</leo-virtual-list>
	</view>
</template>

<script setup>
	function getListApi({dataList,callback}){
		setTimeout(()=>{
			let list = [];
			for (var i = dataList.length; i < dataList.length+10; i++) {
				list.push({name:i})
			}
			callback(list, 300);	// 和complete用法一致, 第二参数需要传递数据库的总数量
		},200)
	}
</script>

<style>
.flex{
		display: flex;
	}
	.flex-1{
		flex: 1;
	}
	.flex-center-center{
		justify-content: center;
		align-items: center;
	}
	.flex-center{
		align-items: center;
	}
	.flex-y{
		flex-direction: column;
	}
	.flex-none{
		flex: none;
	}
	.drop{
		padding: 10rpx;
	}
</style>
